<template>
    <div class="baiduMap-container">
        <el-dialog
            :title="$t('overview.mapPowerStation')"
            :visible="visibleBaiduMap"
            width="800px"
            @close="()=>{$store.commit('setVisibleBaiduMap',false)}">
            <div ref="map" id="allmap">
                <baidu-map :style="{width:mapData.width,height:mapData.height}" class="map" :ak="baiduMapKey" :zoom="mapData.zoom" :center="{lng: mapData.center.lng, lat: mapData.center.lat}"
    @ready="handler" :scroll-wheel-zoom="true">
                    <!--缩放控件-->
                    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                    <!--聚合动态添加的点坐标-->
                    <bm-marker-clusterer :averageCenter="true">
                        <bm-marker v-for="marker of mapData.markers" :key="marker.code" :position="{lng: marker.lng, lat: marker.lat}"></bm-marker>
                    </bm-marker-clusterer>

                    <bm-marker v-for="marker of mapData.markers" :key="marker.lng" :position="{lng: marker.lng, lat: marker.lat}"></bm-marker>
                </baidu-map>
            </div>
        </el-dialog>
    </div>
</template>

<script scoped>
//百度地图
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
export default {
    name:'Header',
    components:{
        BaiduMap,
        BmMarker,
        BmNavigation,
        BmMarkerClusterer,
        BmInfoWindow
    },
    props:{
        mapData:{
            type:Object,
            default:()=>{
                return {
                    width:'100%',
                    height:'400px',
                    zoom:6,
                    center:{
                        lng:'102',
                        lat:'23'
                    },
                    mapObj:{},//地图对象
                    markers:[],//地图上所有的标记
                }
            }
        }
    },
    data(){
        return {
            mapToolType:''
        }
    },
    watch:{
        // this.mapData.markers=[{lng:transParam.longitude,lat:transParam.latitude}]
        // this.mapData.center={lng:transParam.longitude,lat:transParam.latitude}
    },
    computed: {
        visibleBaiduMap(){
            return this.$store.state.sysStore.visibleBaiduMap
        }
    },
    mounted(){
        this.getMapData()
    },
    methods:{
        handler({BMap,map}){
            this.mapData.mapObj=map;
            this.mapData.width=this.$refs.map.clientWidth
        },
        async getMapData(){
            var mapParam = {};
            var markerParam = {};
            var markerData = [];
            var nationData = [];
            var provinceData = [];
            var cityData = [];
            var userTypeValue= sessionStorage.getItem('userType')//用户类型
            var streetData = [];//终端用户和安装商显示具体位置

            // 电站查询
            let data=await this.API.selectSiteGroupAddress({})
            if(data&&data[0]){
				var pdtSites = data[0];
				nationData = pdtSites.nationList;//获取国家信息
				provinceData = pdtSites.provinceList;//获取省市信息
				cityData = pdtSites.cityList;
				
				//安装商和终端用户可以查看具体位置
				if(userTypeValue==3 ||userTypeValue==4 || userTypeValue==5){
					streetData = pdtSites.streetList;
				}
            }
            
            data.forEach(obj => {
                if(obj&&obj.latitude&&obj.longitude){
                    var param = {};
        //			param.latitude = transformPoint(obj.latitude);
        //			param.longitude = transformPoint(obj.longitude);
                    param = transformPoint(obj.latitude,obj.longitude,'baidu');
                    param.infoWindowText = getText('#js_site_siteName1')+":"+obj.siteName;
                    param.text = obj.siteName;
                    param.id = obj.ids;
                    markerData.push(param);
                }
            });

            //代表从首页进入   配置map信息
            if(name=='overview'){
                mapParam.zoom = 3;//设置级别
                mapParam.minZoom = 7;//设置地图最小级别
                mapParam.maxZoom = 3;//设置地图最大级别
                if((userTypeValue==3 ||userTypeValue==4 || userTypeValue==5) && streetData.length > 0){
                    mapParam.LatLng={latitude:streetData[0].latitude,longitude:streetData[0].longitude};
                    mapParam.minZoom = 19;//设置地图最大级别
                }else{
                    mapParam.LatLng={latitude:30.50,longitude:114.33};
                }
                
                var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
                var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") < 1 ; //判断是否Safari
                if(isSafari){
                    mapParam.minZoom = 7;
                }
                
                markerParam.textBegin = '<br/><br/>'+getText('#js_map_info-all')+':';
                markerParam.textEnd = '';
                markerParam.markerData = markerData;
                markerParam.markerClustererFlag = true;
        //		markerParam.markListenerFlag = true;
                markerParam.markClickCallBack = function(event){
                    var textDom = event.target.content;
                    var reg = /^.*data-id="(\w+)">([^</a>]*).*$/;
                    if(reg.test(textDom)){
                        var arr = reg.exec(textDom);
                        var siteId = arr[1];
                        var siteName = arr[2];
                        sessionStorage.setItem("selRow_site_Id",siteId);
                        sessionStorage.setItem("selRow_siteName",siteName);
                        openUrlPlus(getContextPath()+"i18n/jump.do?url=/views/overview-site.jsp");
                    }
                };
                markerParam.customMarkerFlag = true;
                markerParam.markerClustererGroup = 
                    [
                        {minZoom:19,maxZoom:8,markerClustererData:cityData,clustField:'city',countField:'siteCount',labelTextMiddle:'<br/>'+getText('#js_map_info-all')+':',labelText:'<br/><br/>',labelTextEnd:'',defaultZoom:10},
                        {minZoom:7,maxZoom:7,markerClustererData:cityData,clustField:'city',countField:'siteCount',labelTextMiddle:'<br/>'+getText('#js_map_info-all')+':',labelText:'<br/><br/>',labelTextEnd:'',defaultZoom:9},
                        {minZoom:6,maxZoom:6,markerClustererData:provinceData,clustField:'province',countField:'siteCount',labelTextMiddle:'<br/>'+getText('#js_map_info-all')+':',labelText:'<br/><br/>',labelTextEnd:'',defaultZoom:7},
                        {minZoom:5,maxZoom:0,markerClustererData:nationData,clustField:'nation',countField:'siteCount',labelTextMiddle:'<br/>'+getText('#js_map_info-all')+':',labelText:'<br/><br/>',labelTextEnd:'',defaultZoom:6}
                    ];
                markerParam.markerClustererDefaultZoom = 7;
            }else if(name=='overview-site'||name=='overview-inverter'){
                mapParam.maxZoom = 8;//设置地图最大级别
                //电站只有一个经纬度
                var marker = markerData[0];
                var param = {};
                if(marker&&marker.latitude&&marker.longitude){
                    param = transformPoint(marker.latitude,marker.longitude,'baidu');
        //			param.latitude = transformPoint(marker.latitude);
        //			param.longitude = transformPoint(marker.longitude);
                    mapParam.LatLng = param;
                    markerParam.infoWindowText = marker.siteName;
                    markerParam.opts = {
                            enableMessage:true//设置允许信息窗发送短息
                            }
        //			markerParam.markListenerFlag = true;
                    markerParam.customMarkerFlag = true;
                }
                mapParam.zoom = 10;//设置级别
        //		mapParam.maxZoom = 20;//设置地图最大级别
                markerParam.markerData = markerData;
            }

            $BaiduMap.BaiduMapPlugin(mapParam,
			markerParam,
			null,
			null);


        }
    }
}
</script>

<style lang="less">
@color_box_bg:#EFEFEF;
@color_title:#444;
@color_text:#636162;
@color_unit:#636162;
@color_light:#ff8920;
@border_bottom:1px dashed #D1D1D1;
@border_radius:3px;
@color_unit:#8a8a8a;
.baiduMap-container{
   .el-dialog__wrapper .el-dialog .el-dialog__body{
       padding: 0;
   }
}
</style>